<template>
   <el-table
    ref="tableRef"
    style="width:100%"
    border
    size="mini"
    :class="tableClassName"
    max-height="380"
    :data="tableData"
>
    <el-table-column type="index" label="序号" width="50" align="center">
        <template slot-scope="{row}">
            <span >{{ row.index }}</span>
        </template>
    </el-table-column>
    <el-table-column label="校验结果" align="center" width="160" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
        <span>{{ row.result }}</span>
        </template>
    </el-table-column>
    <el-table-column v-for="item in tables.columns" :key="item.key" :label="item.lable" :width="item.width" :align="item.align" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
        <span >{{ row[item.key] }}</span>
        </template>
    </el-table-column>
   
</el-table>
</template>

<script>
export default {
props: {
    tableClassName: {
      type: String,
      default() {
        return 'success'
      }
    }
  },
  data() {
    return {
        tables: {
            columns: [
                { lable: "VIN", key: "vin", width: "160px", align: "center" },
                {
                    lable: "大区",
                    key: "saleRegionName",
                    width: "80px",
                    align: "center"
                },
                { lable: "省份", key: "province", width: "80px", align: "center" },
                { lable: "城市", key: "city", width: "80px", align: "center" },
                {
                    lable: "店简称",
                    key: "dealerShortName",
                    width: "100px",
                    align: "center"
                },
                {
                    lable: "店代码",
                    key: "dealerCode",
                    width: "80px",
                    align: "center"
                },
                {
                    lable: "车系标准名称",
                    key: "seriesNormalName",
                    width: "160px",
                    align: "center"
                },
                { lable: "车系", key: "seriesName", width: "120px", align: "center" },
                { lable: "车型", key: "modelName", width: "160px", align: "center" },
                {
                    lable: "上牌人姓名",
                    key: "plateName",
                    width: "90px",
                    align: "center"
                },
                {
                    lable: "上牌大区",
                    key: "plateBigArea",
                    width: "80px",
                    align: "center"
                },
                {
                    lable: "上牌省份",
                    key: "plateProvince",
                    width: "80px",
                    align: "center"
                },
                {
                    lable: "上牌城市",
                    key: "plateCity",
                    width: "80px",
                    align: "center"
                },
                {
                    lable: "上牌日期",
                    key: "plateDate",
                    width: "150px",
                    align: "center"
                },
                {
                    lable: "开票日期",
                    key: "invoiceDate",
                    width: "90px",
                    align: "center"
                },
                {
                    lable: "有效时间",
                    key: "effectiveEndTime",
                    width: "160px",
                    align: "center"
                },
                {
                    lable: "创建时间",
                    key: "createTime",
                    width: "160px",
                    align: "center"
                }
            ]
        },
        tableData: [], // 需要渲染的数据
        saveDATA: [], // 所有数据
        tableRef: null, // 设置了滚动的那个盒子
        tableWarp: null,
        fixLeft: null,
        fixRight: null,
        tableFixedLeft: null,
        tableFixedRight: null,
        scrollTop: 0,
        num: 0,
        start: 0,
        end: 42, // 3倍的pageList
        starts: 0, // 备份[保持与上一样]
        ends: 42, // 备份[保持与上一样]
        pageList: 14, // 一屏显示
        itemHeight: 41, // 每一行高度
        timeOut: 400 // 延迟
    }
  },
  mounted() {
    
  },
  methods: {
    createScroll() {
        // 设置了滚动的盒子
        this.tableRef = this.$refs.tableRef.bodyWrapper
        // 左侧固定列所在的盒子
        this.tableFixedLeft = document.querySelector(
            `.${this.tableClassName} .el-table__fixed .el-table__fixed-body-wrapper`
        )
        // 右侧固定列所在的盒子
        this.tableFixedRight = document.querySelector(
            `.${this.tableClassName} .el-table__fixed-right .el-table__fixed-body-wrapper`
        )
        /**
         * fixed-left | 主体 | fixed-right
         */
        // 主体改造
        // 创建内容盒子divWarpPar并且高度设置为所有数据所需要的总高度
        let divWarpPar = document.createElement('div')
        // 如果这里还没获取到saveDATA数据就渲染会导致内容盒子高度为0，可以通过监听saveDATA的长度后再设置一次高度
        divWarpPar.style.height = this.saveDATA.length * this.itemHeight + 'px'
        // 新创建的盒子divWarpChild
        let divWarpChild = document.createElement('div')
        divWarpChild.className = 'fix-warp'
        // 把tableRef的第一个子元素移动到新创建的盒子divWarpChild中
        divWarpChild.append(this.tableRef.children[0])
        // 把divWarpChild添加到divWarpPar中，最把divWarpPar添加到tableRef中
        divWarpPar.append(divWarpChild)
        this.tableRef.append(divWarpPar)

        // // left改造
        // let divLeftPar = document.createElement('div')
        // divLeftPar.style.height = this.saveDATA.length * this.itemHeight + 'px'
        // let divLeftChild = document.createElement('div')
        // divLeftChild.className = 'fix-left'
        // this.tableFixedLeft &&
        //     divLeftChild.append(this.tableFixedLeft.children[0])
        // divLeftPar.append(divLeftChild)
        // this.tableFixedLeft && this.tableFixedLeft.append(divLeftPar)

        // right改造
        let divRightPar = document.createElement('div')
        divRightPar.style.height = this.saveDATA.length * this.itemHeight + 'px'
        let divRightChild = document.createElement('div')
        divRightChild.className = 'fix-right'
        this.tableFixedRight &&
            divRightChild.append(this.tableFixedRight.children[0])
        divRightPar.append(divRightChild)
        this.tableFixedRight && this.tableFixedRight.append(divRightPar)

        // 被设置的transform元素
        this.tableWarp = document.querySelector(
            `.${this.tableClassName} .el-table__body-wrapper .fix-warp`
        )
        // this.fixLeft = document.querySelector(
        //     '.el-table .el-table__fixed .el-table__fixed-body-wrapper .fix-left'
        // )
        this.fixRight = document.querySelector(
            `.${this.tableClassName} .el-table__fixed-right .el-table__fixed-body-wrapper .fix-right`
        )

        this.tableRef.addEventListener('scroll', this.onScroll)
    },
    init(data) {
      this.saveDATA = data
    //   if (data)
      this.tableData = this.saveDATA.slice(this.start, this.end)
      this.createScroll()
    },
    onScroll() {
      this.scrollTop = this.tableRef.scrollTop
      this.num = Math.floor(this.scrollTop / (this.itemHeight * this.pageList))
    }
  },
  watch: {
    num: function(newV) {
    // 因为初始化时已经添加了3屏的数据，所以只有当滚动到第3屏时才计算位移量
      if (newV > 0) {
        this.start = (newV - 1) * this.pageList
        this.end = (newV + 2) * this.pageList
        setTimeout(() => {
        // 计算偏移量
          this.tableWarp.style.transform = `translateY(${this.start *
            this.itemHeight}px)`
        //   if (this.fixLeft) {
        //     this.fixLeft.style.transform = `translateY(${this.start *
        //       this.itemHeight}px)`
        //   }
          if (this.fixRight) {
            this.fixRight.style.transform = `translateY(${this.start *
              this.itemHeight}px)`
          }
          this.tableData = this.saveDATA.slice(this.start, this.end)
        }, this.timeOut)
      } else {
        setTimeout(() => {
          this.tableData = this.saveDATA.slice(this.starts, this.ends)
          this.tableWarp.style.transform = `translateY(0px)`
          if (this.fixLeft) {
            this.fixLeft.style.transform = `translateY(0px)`
          }
          if (this.fixRight) {
            this.fixRight.style.transform = `translateY(0px)`
          }
        }, this.timeOut)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.myTable {
  ::v-deep td {
    padding: 6px 0 !important;
  }
}

/*滚动条样式*/

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 2px;
  background: #666;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: #ccc;
}
</style>
